<!DOCTYPE html>
<html lang="en">
<head>
    <!--登录之后，首页之前的界面-->
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="keywords" content="">
    <meta name="description" content="">
    <link rel="shortcut icon" href="favicon.ico">
    <link href="${ctx!}/assets/css/bootstrap.min.css?v=3.3.6" rel="stylesheet">
    <link href="${ctx!}/assets/css/font-awesome.css?v=4.4.0" rel="stylesheet">
    <link href="${ctx!}/assets/css/plugins/bootstrap-table/bootstrap-table.min.css" rel="stylesheet">
    <link href="${ctx!}/assets/css/animate.css" rel="stylesheet">
    <link href="${ctx!}/assets/css/style.css?v=4.1.0" rel="stylesheet">
    <link href="${ctx!}/assets/css/admin-main.css" rel="stylesheet">
    <link href="${ctx!}/assets/css/alarm.css" rel="stylesheet">
    <link href="${ctx!}/assets/css/cubic.css" rel="stylesheet">


    <!-- 全局js -->
    <script src="${ctx!}/assets/js/jquery.min.js?v=2.1.4"></script>
    <script src="${ctx!}/assets/js/bootstrap.min.js?v=3.3.6"></script>

    <!-- Bootstrap table -->
    <script src="${ctx!}/assets/js/plugins/bootstrap-table/bootstrap-table.min.js"></script>
    <script src="${ctx!}/assets/js/plugins/bootstrap-table/bootstrap-table-mobile.min.js"></script>
    <script src="${ctx!}/assets/js/plugins/bootstrap-table/locale/bootstrap-table-zh-CN.min.js"></script>

    <!-- Peity -->
    <script src="${ctx!}/assets/js/plugins/peity/jquery.peity.min.js"></script>

    <script src="${ctx!}/assets/js/plugins/validate/jquery.validate.min.js"></script>
    <script src="${ctx!}/assets/js/plugins/validate/messages_zh.min.js"></script>
    <script src="${ctx!}/assets/js/plugins/layer/layer.min.js"></script>
    <script src="${ctx!}/assets/js/plugins/layer/laydate/laydate.js"></script>

    <title>盛世节能数据中心</title>
    <style>
        body, p, div {
            margin: 0px;
        }

        .top_bar {
            height: 57px;
            width: 100%;
        }

        .main {
            height: 90%;
            width: 100%;
        }

        .main-left {
            float: left;
            height: 100%;
            width: 30%;
        }

        .main-left-item-bg {
            background: rgba(6, 46, 88, 0.3);
            border-top: 1px solid #163D65;
            border-bottom: 1px solid #163D65;
        }

        .main-center {
            float: left;
            height: 100%;
            width: 40%;
        }

        .main-right {
            float: left;
            height: 100%;
            width: 29.99%;
        }

        button.active {
            border: 1px solid rgb(2, 86, 166);
            background: rgba(2, 86, 166, 0.3);
            color: rgb(2, 86, 166);
            border-radius: 2px;
        }

        button {
            border: none;
            background: rgba(2, 86, 166, 0.3);
            color: rgba(2, 86, 166, 0.7);
            border-radius: 2px;
        }
    </style>
</head>
<body background="${ctx!}/assets/img/index_bg.png" style="background-size: 100% 100%;">
<img src="${ctx!}/assets/img/open_full.png" id="fullBtn" onclick="loadFullScreen()"
     style="float: right;margin-right: 10px;margin-top: 10px;width: 30px;height: 30px;cursor:pointer;"/>
<div class="top_bar" style="background: url('${ctx!}/assets/img/index_top_bar_bg.png;');background-size: 100% 100%;">
    <a style="margin: 0 auto;display: block;width: 322px;" href="${ctx!}/main">
        <img src="${ctx!}/assets/icons/logo.png">
        <span style="display:inline-block;font-size: 22px;color: white;font-family: 微软雅黑;font-weight: 600;">能耗综合信息管理平台</span>
    </a>
</div>
<div class="main">
    <div class="main-left">
        <!--公司概况-->
        <div style="margin-left:20px;margin-right:10px;background: url('${ctx!}/assets/img/index_div_bg02.png');width: 93%;height: 40%;background-size:100% 100%;">
            <div style="width: 100%;display: block">
                <span style="margin-left: 20px;margin-top:16px;float:left;display: inline-block;width: 15px;height: 15px;background-color: #00F6FF;"></span>
                <span style="margin-left:5px;margin-top: 16px;display: inline-block;height: 15px;line-height: 15px;float: left;color: white;font-weight: 700;font-size: 14px;">公司概况</span>
            </div>
            <div style="width: 100%;float: left;">
                <img src="${ctx!}/assets/img/index_corp.png" width="60%"
                     style="display: block;margin: 0 auto;margin-top: 5px;">
            </div>
            <div style="margin-top: 6px;margin-left: 20px;margin-right:20px;color: white;float: left;">
                <p style="text-indent: 2em;">
                    是一家集区域投资与能源管理、地热能系统集成与维护、建筑节能技术咨询等于一体的国际高级技术企业
                </p>
                <p style="text-indent: 2em;margin-top: 2px;">
                    是江苏省建筑节能技术服务龙头企业
                </p>
                <p style="text-indent: 2em;margin-top: 2px;">
                    超过10年地热能源领域的雄厚沉淀，致力于解决未来能源问题的新能源服务商
                </p>
                <p style="text-indent: 2em;margin-top: 5px;">
                    股票代码：871794
                </p>
                <p style="text-indent: 2em;margin-top: 2px;">
                    公司价值观：责任、创新、共赢、开放、务实
                </p>
            </div>
        </div>
        <!--项目列表-->
        <div style="margin-left:20px;margin-right:10px;background: url('${ctx!}/assets/img/index_div_bg01.png');width: 93%;height: 56%;background-size:100% 100%;margin-top: 15px;">
            <div style="width: 100%;display: block;">
                <span style="margin-left: 20px;margin-top:16px;float:left;display: inline-block;width: 15px;height: 15px;background-color: #00F6FF;"></span>
                <span style="margin-left:5px;margin-top: 16px;display: inline-block;height: 15px;line-height: 15px;float: left;color: white;font-weight: 700;font-size: 14px;">项目列表</span>
            </div>
            <div id="scroll-box" style="float: left;margin-top: 20px;margin-left: 10px;overflow: hidden;height: 73%;">
                <div id="project_list">
                    <#list projects as project>
                        <div class="project_item" style="float:left;margin-top:5px;width: 98%;"
                                <#if project_index%2==0>
                            class="main-left-item-bg"
                                </#if>>
                            <div style="float: left;width: 180px;display: inline-block;margin-left: 20px;">
                                <span style="display: block;font-size: 18px;color: #3690AE;font-weight: 700;margin-top: 10px;">${project.name}</span>
                                <div style="margin-top: 5px;"><span
                                            style="color:#3690AE;">地点：</span><span>${project.city}</span>
                                </div>
                            </div>
                            <div style="float: right;width: 140px;display: inline-block;margin-right: 20px;">
                                <span style="display: block;font-size: 20px;color: white;font-weight: 700;margin-top: 10px;">${project.area}万平方米</span>
                                <span style="display:block;margin-top: 2px;right: 0px;bottom: 0px;">建筑面积</span>
                            </div>
                        </div>
                    </#list>
                </div>
            </div>
        </div>
    </div>
    <div class="main-center">
        <div style="width: 100%;height: 60%;margin-top: 10%;">
            <img src="${ctx!}/assets/img/test.png" style="overflow: hidden;height: 100%;width: 100%;">
        </div>
        <div style="width: 100%;height: 20%;margin-top: 7%;">
            <div style="background: url('${ctx!}/assets/img/index_bar_bg.jpg');background-size:100% 100%;float:left;height: 100%;width: 30%;background-color: white;margin-left: 13px;">
                <span style="display:inline-block;width:150px;font-weight: 600;color: white;font-family: 微软雅黑;font-size: 16px;margin-left: 2px;margin-top: 10px;">可再生能源利用量<strong
                            style="color: orange;font-size: 20px;">:</strong></span>
                <span STYLE="display: block;font-size: 24px;color: #FFC026;font-weight: 600;margin-top: 20px;margin-left: 10px;line-height:200%;text-align:center;width: 80%;height: 45%;margin-top: 8%;">${renewableEnergy}5000KJ</span>
            </div>
            <div style="background: url('${ctx!}/assets/img/index_bar_bg.jpg');background-size:100% 100%;float:left;height: 100%;width: 30%;background-color: white;margin-left: 13px;">
                <span style="display:block;width:100px;font-weight: 600;color: white;font-family: 微软雅黑;font-size: 16px;margin-left: 2px;margin-top: 10px;">节约标煤量<strong
                            style="color: orange;font-size: 20px;">:</strong></span>
                <span style="display: inline-block;font-size: 24px;color: #FFC026;font-weight: 600;margin-top: 20px;margin-left: 10px; line-height:200%;text-align:center;width: 80%;height: 45%;margin-top: 8%;">${saveCoal}4597标吨煤</span>
                <#--                <span style="display: inline-block;font-size: 24px;color: #FFC026;font-weight: 600;margin-top: 18px;">标吨煤</span>-->
            </div>
            <div style="background: url('${ctx!}/assets/img/index_bar_bg.jpg');background-size:100% 100%;float:left;height: 100%;width: 30%;background-color: white;margin-left: 13px;">
                <span style="display:block;width:100px;font-weight: 600;color: white;font-family: 微软雅黑;font-size: 16px;margin-left: 2px;margin-top: 10px;">碳减排量<strong
                            style="color: orange;font-size: 20px;">:</strong></span>
                <span style="display: block;font-size: 24px;color: #FFC026;font-weight: 600;margin-top: 20px;margin-left: 10px;line-height:200%;text-align:center;width: 80%;height: 45%;margin-top: 8%;">${carbonReduction}2563Kg</span>
            </div>
        </div>
    </div>
    <div class="main-right">
        <!--系统能耗-->
        <div id="a" style="margin-left:20px;margin-right:20px;background: url('${ctx!}/assets/img/index_div_bg03.png');width: 93%;height: 30%;background-size:100% 100%;">
            <span style="margin-left: 20px;margin-top:16px;float:left;display: inline-block;width: 15px;height: 15px;background-color: #00F6FF;"></span>
            <span style="margin-left:5px;margin-top: 16px;display: inline-block;height: 15px;line-height: 15px;float: left;color: white;font-weight: 700;font-size: 14px;">系统能耗</span>
            <div style="height: 100%;width: 100%;">
                <div id="topGraph" style="margin: 0 auto;width: 90%;height: 100%;"></div>
            </div>
        </div>
        <!--供冷、供暖能耗统计-->
        <div id="b" style="margin-left:20px;margin-right:20px;background: url('${ctx!}/assets/img/index_div_bg03.png');width: 93%;height: 33%;background-size:100% 100%;margin-top: 15px;">
            <span style="margin-left: 20px;margin-top:16px;float:left;display: inline-block;width: 15px;height: 15px;background-color: #00F6FF;"></span>
            <span style="margin-left:5px;margin-top: 16px;display: inline-block;height: 15px;line-height: 15px;float: left;color: white;font-weight: 700;font-size: 14px;">供冷/供暖能耗统计</span>
            <div style="float: right;margin-top: 20px;margin-right: 20px;z-index: 10">
                <button id="center0" class="active" onclick="drawCenter(0)">供冷</button>
                <button id="center1" onclick="drawCenter(1)">供暖</button>
            </div>
            <div style="z-index: 9;float: left;height: 100%;width: 100%;">
                <div id="centerGraph" style="margin: 0 auto;z-index:8;width: 100%;height: 70%;"></div>
            </div>
        </div>
        <!--供冷、供暖SCOP变化曲线-->
        <div id="c" style="margin-left:20px;margin-right:20px;background: url('${ctx!}/assets/img/index_div_bg03.png');width: 93%;height: 30%;background-size:100% 100%;margin-top: 15px;">
            <span style="margin-left: 20px;float:left;display: inline-block;width: 15px;height: 15px;background-color: #00F6FF;"></span>
            <span style="margin-left:5px;display: inline-block;height: 15px;line-height: 15px;float: left;color: white;font-weight: 700;font-size: 14px;">供冷/供暖SCOP变化曲线</span>
            <div style="float: right;margin-right: 20px">
                <button id="bottom0" class="active" onclick="drawBottom(0)">供冷</button>
                <button id="bottom1" onclick="drawBottom(1)">供暖</button>
            </div>
            <div style="float: left;height: 100%;width: 100%;">
                <div id="bottomGraph" style="width: 100%;height: 65%;margin: 0 auto;"></div>
            </div>
        </div>
    </div>
</div>
<!-- 全局js -->
<script src="${ctx!}/assets/js/jquery.min.js?v=2.1.4"></script>
<script src="${ctx!}/assets/js/bootstrap.min.js?v=3.3.6"></script>

<!-- Bootstrap table -->
<script src="${ctx!}/assets/js/plugins/bootstrap-table/bootstrap-table.min.js"></script>
<script src="${ctx!}/assets/js/plugins/bootstrap-table/bootstrap-table-mobile.min.js"></script>
<script src="${ctx!}/assets/js/plugins/bootstrap-table/locale/bootstrap-table-zh-CN.min.js"></script>

<!-- Peity -->
<script src="${ctx!}/assets/js/plugins/peity/jquery.peity.min.js"></script>

<script src="${ctx!}/assets/js/plugins/validate/jquery.validate.min.js"></script>
<script src="${ctx!}/assets/js/plugins/validate/messages_zh.min.js"></script>
<script src="${ctx!}/assets/js/plugins/layer/layer.min.js"></script>
<script src="${ctx!}/assets/js/plugins/layer/laydate/laydate.js"></script>

<script src="${ctx!}/assets/js/echarts.min.js"></script>

<!--本页局部JS-->
<script>

    ceterMode = 0
    bottomMode = 0

    /*设置加载框最长等待时间*/
    loadTime = 40 * 1000//秒
    var isFullscreen = false;

    function loadFullScreen() {
        var element = document.documentElement;
        if (isFullscreen == false) {
            // to full screen
            if (element.requestFullscreen) {
                element.requestFullscreen();
            } else if (element.mozRequestFullScreen) {
                element.mozRequestFullScreen();
            } else if (element.webkitRequestFullscreen) {
                element.webkitRequestFullscreen();
            } else if (element.msRequestFullscreen) {
                element.msRequestFullscreen();
            }
            $("#fullBtn").attr("src", "${ctx!}/assets/img/open_full.png")
        } else {
            // quit full screen
            if (document.exitFullscreen) {
                document.exitFullscreen();
            } else if (document.msExitFullscreen) {
                document.msExitFullscreen();
            } else if (document.mozCancelFullScreen) {
                document.mozCancelFullScreen();
            } else if (document.webkitExitFullscreen) {
                document.webkitExitFullscreen();
            }
            $("#fullBtn").attr("src", "${ctx!}/assets/img/open_full.png")
        }

        isFullscreen = !isFullscreen;
    }

    function scrollProjectList() {
        //获得当前列表
        var $uList = $("#project_list");
        var timer = null;
        //触摸清空定时器
        $uList.hover(function () {
                clearInterval(timer);
            },
            function () { //离开启动定时器
                timer = setInterval(function () {
                        scrollList($uList);
                    },
                    3000);
            }).trigger("mouseleave"); //自动触发触摸事件
        //滚动动画
        function scrollList(obj) {
            //获得当前<li>的高度
            var scrollHeight = $("#project_list").children(":first").height();
            //滚动出一个<li>的高度
            obj.stop().animate({
                    marginTop: -scrollHeight
                },
                600,
                function () {
                    //动画结束后，将当前<ul>marginTop置为初始值0状态，再将第一个<li>拼接到末尾。
                    var temp = $("#project_list").children(":first")
                    temp.remove()
                    obj.css({
                        marginTop: 0
                    })
                    temp.appendTo(obj)
                    // .find("#project_list>div:first").appendTo(obj);
                    // obj.css({
                    //     marginTop: 0
                    // }).find("#project_list>div:first").appendTo(obj);
                });
        }
    }

    $(function () {
        scrollProjectList()
        var layer_index = layer.load(0, {time: loadTime, offset: ['50%', '50%']});
        drawTop();
        drawCenter(ceterMode);
        drawBottom(bottomMode);
        layer.close(layer_index)
    });

    /*绘制系统能耗*/
    function drawTop() {
        $.ajax({
            type: 'GET',
            url: '${ctx!}/index/data/syspower',
            success: function (data) {
                // while (true);
                var data = eval('(' + data + ')')
                if (true) {
                    data = data.data
                    var showData = []
                    var totalData = 0
                    var equipments = data.equipments
                    var powercosts = data.powercosts
                    powerCosts = [256, 987, 2563, 879, 2356, 258]
                    for (var i = 0; i < equipments.length; i++) {
                        showData.push({value: powercosts[i], name: equipments[i]})
                        totalData += parseInt(powercosts[i])
                    }
                    drawTop_graph(showData, totalData)
                } else {
                    layer.msg(data.message)
                }
            }
        })
    }

    function drawTop_graph(data, total) {
        var myChart = echarts.init(document.getElementById('topGraph'));
        var option = {
            color: ["#FF5C5C", "#4BC2DF", "#4671C6", "#7CCE7A", "#FFC655", "#E733A2", "#C0CC2D"],
            tooltip: {
                trigger: 'item'
            },
            legend: {
                orient: 'vertical',
                x: 'right',
                y: 'center',
                itemHeight: 10,
                itemWidth: 20,
                padding: [0, 0, 0, 200],
                textStyle: { //图例文字的样式
                    color: '#fff',
                    fontSize: 10
                },
                formatter: function (name) {
                    return name;
                }
            },
            series: [
                {
                    name: '系统能耗',
                    type: 'pie',
                    radius: ['60%', '30%'],
                    avoidLabelOverlap: false,
                    label: {
                        show: false,
                        position: 'center'
                    },
                    emphasis: {
                        label: {
                            show: true,
                            fontSize: '13',
                            // formatter: [
                            //
                            //     '{b}',
                            //     '({c})'
                            // ].join('\n'),
                            formatter: [
                                total + '',
                                '耗能总量'
                            ].join('\n'),
                            fontWeight: 'bold'
                        }
                    },
                    labelLine: {
                        show: false
                    },
                    data: data
                }
            ]
        };
        myChart.setOption(option);

    }


    /*绘制中间供冷/供暖能耗统计*/
    /*mode=0供冷  mode=1供暖  */
    function drawCenter(mode) {
        // var load_index = layer.load(2, {time: loadTime, offset: ['52%', '84%']});
        if (mode == 0) {
            $("#center0").addClass("active")
            $("#center1").removeClass("active")
        } else {
            $("#center1").addClass("active")
            $("#center0").removeClass("active")
        }
        $.ajax({
            type: 'GET',
            url: '${ctx!}/index/data/power?mode=' + mode,
            success: function (data) {
                var data = eval('(' + data + ')')
                if (true) {
                    data = data.data
                    var dates = data.dates
                    dates = ['2021-07-12', '2021-07-13', '2021-07-14', '2021-07-15', '2021-07-16', '2021-07-17', '2021-07-18',]
                    var powerCosts = data.powercosts
                    powerCosts = [789, 256, 987, 256, 369, 254, 125]
                    for (var i = 0; i < dates.length; i++) {
                        dates[i] = parseInt(dates[i].substr(8, 2)) + '日'
                    }
                    drawCenter_graph(mode, dates, powerCosts)
                } else {
                    layer.msg("能耗曲线显示失败," + data.message)
                }
            }
        })
    }

    function drawCenter_graph(mode, xdata, ydata) {
        //供冷模式
        // var max = 0.4
        // var interval = 0.1
        var color = ['#6a7985', '#65ABE7', '#657CA8', '#65ABE7', '#657CA8', 'rgba(101,171,231,0.6)']
        //供暖模式
        if (mode != 0) {
            // max = 0.8
            // interval = 0.2
            color = ['#ec534c', '#ec534c', '#657CA8', '#ec534c', '#ec534c', 'rgba(236,83,76,0.6)']
        }
        var chart = echarts.init(document.getElementById('centerGraph'))
        option = {
            tooltip: {
                trigger: 'axis',
                formatter: function (params) {
                    var str = (mode == 0 ? '供冷：' : '供暖：')
                    return params[0].marker + xdata[params[0].dataIndex] + str + ydata[params[0].dataIndex] + "单位"
                },
                axisPointer: {
                    label: {
                        backgroundColor: color[0]
                    }
                }
            },
            grid: {
                left: '16%',
                right: "18%",
                top: "20%",
                bottom: "20%"
            },
            xAxis: {
                name: "day",
                type: 'category',
                data: xdata,
                axisLabel: { //X轴标签
                    show: true,
                    textStyle: {
                        color: color[1],//字体颜色
                        fontSize: 12 //字体大小
                    }
                },
                axisLine: {
                    show: true,
                    lineStyle: {
                        color: color[1],
                    }
                },
                axisTick: {show: false},
            },
            yAxis: {
                name: "kwh",
                type: 'value',
                axisLabel: { //X轴标签
                    show: true,
                    textStyle: {
                        color: color[3],//字体颜色
                        fontSize: 12 //字体大小
                    }
                },
                // min: 0,
                // max: max,
                // interval: interval,
                // axisLabel: {
                //     formatter: function (value, index) {
                //         return value + '(kwh/m2)'
                //     }
                // },
                axisLine: {
                    show: true,
                    lineStyle: {
                        color: color[4],
                    }
                },
                axisTick: {show: false},
                splitLine: { //Y轴分隔符
                    show: true,
                    lineStyle: {
                        color: color[5]
                    }

                }
            },
            series: [{
                data: ydata,
                type: 'bar',
                barWidth: '60%',
                itemStyle: {
                    color: color[5]
                }
            }]
        }
        chart.setOption(option)
    }

    /*绘制供冷/供暖SCOP变化曲线*/
    /*mode=0供冷  mode=1供暖  */
    function drawBottom(mode) {
        if (mode == 0) {
            $("#bottom0").addClass("active")
            $("#bottom1").removeClass("active")
        } else {
            $("#bottom1").addClass("active")
            $("#bottom0").removeClass("active")
        }
        // var load_index = layer.load(2, {time: loadTime, offset: ['82%', '84%']});
        $.ajax({
            type: 'GET',
            url: '${ctx!}/index/data/scop?mode=' + mode,
            success: function (data) {
                var data = eval('(' + data + ')')
                if (true) {
                    data = data.data
                    var dates = data.dates
                    dates = ['2021-07-12', '2021-07-13', '2021-07-14', '2021-07-15', '2021-07-16', '2021-07-17', '2021-07-18',]
                    var scops = data.scops
                    scops = [0.125, 0.2, 0.3, 0.4, 0.3, 0.2, 0.4]
                    for (var i = 0; i < dates.length; i++) {
                        dates[i] = parseInt(dates[i].substr(8, 2)) + '日'
                    }
                    drawBottom_graph(mode, dates, scops)
                } else {
                    layer.msg("SCOP曲线显示失败," + data.message)
                }
            }
        })
    }

    function drawBottom_graph(mode, xdata, ydata) {
        var color = ['#6a7985', '#657CA8', '#65ABE7', '#5d98eb', 'rgba(101,171,231,0.3)', 'rgba(126,171,233,0)', 'rgba(44,118,222, 0.8)']
        if (mode != 0) {
            color = ['#ec534c', '#ec534c', '#ec534c', '#ec534c', 'rgba(236,83,76,0.3)', 'rgba(236,83,76,0)', 'rgba(236,83,76,0.8)']
        }
        var chart = echarts.init(document.getElementById('bottomGraph'))
        var option = {
            tooltip: {
                trigger: 'axis',
                formatter: function (params) {
                    var str = (mode == 0 ? '供冷：' : '供暖：')
                    return params[0].marker + xdata[params[0].dataIndex] + str + ydata[params[0].dataIndex] + "单位"
                },
                axisPointer: {
                    type: 'cross',
                    label: {
                        backgroundColor: color[0]
                    }
                }
            },
            grid: {
                left: '15%',
                right: "15%",
                top: "15%",
                bottom: "20%"

            },
            xAxis: {
                name: "day",
                data: xdata,
                axisLine: {
                    show: true,
                    lineStyle: {
                        color: color[1],
                    }
                },
                axisTick: {
                    show: false
                },
                boundaryGap: false,
                axisLabel: { //X轴标签
                    show: true,
                    textStyle: {
                        color: color[1],//字体颜色
                        fontSize: 12 //字体大小
                    }
                },
                splitLine: { //X轴分隔符
                    show: true,
                    lineStyle: {
                        color: color[4]
                    }

                }
            },
            yAxis: [
                {
                    position: 'left',
                    type: 'value',
                    nameTextStyle: {
                        color: color[2],
                        fontSize: 12,
                    },
                    min: 0,
                    max: 5,
                    interval: 1,
                    lineStyle: {
                        color: color[2],
                    },
                    axisLabel: {
                        textStyle: {
                            color: color[2],//字体颜色
                            fontSize: 12 //字体大小
                        }

                    },
                    axisTick: {show: false},
                    axisLine: {
                        show: true,
                        lineStyle: {
                            color: color[1],
                        }
                    },
                    splitLine: { //Y轴分隔符
                        show: true,
                        lineStyle: {
                            color: color[4]
                        }

                    }
                }
            ],
            series: [
                {
                    smooth: true,
                    areaStyle: {
                        normal: {
                            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                                offset: 0,
                                color: color[3]
                            },
                                {
                                    offset: 1,
                                    color: color[5]
                                }
                            ], false),
                            shadowColor: color[6],
                            shadowBlur: 20
                        }
                    },
                    type: 'line',
                    data: ydata,
                    itemStyle: {
                        normal: {
                            color: color[2],
                            label: {
                                show: false, //开启显示
                                position: 'bottom', //在下方显示
                                textStyle: { //数值样式
                                    color: color[2],
                                    fontSize: 16
                                }
                            }
                        }
                    }
                }
            ]
        }
        chart.setOption(option)
    }
</script>
</body>
</html>